<!--
 * @Author: duchengdong
 * @Date: 2023-07-03 11:11:52
 * @LastEditors: duchengdong
 * @LastEditTime: 2023-07-10 09:39:02
 * @Description:
-->
<script setup lang="ts">
import LoginForm from './LoginForm.vue'
</script>

<template>
  <div class="page-login overflow-hidden">
    <div class="header">
      <div class="flex items-center relative text-white justify-center h-full">
        <img src="@/assets/logo.png" alt="" class="logo">
        <span class="title font-bold">Demo</span>
      </div>
    </div>
    <div class="flex items-center">
      <div class="login-form w-full">
        <div class="login-title">
          登录
        </div>
        <LoginForm />
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.page-login {
  background: #293146;
  position: relative;
  height: 100%;
  padding: 10px;
  .header{
		padding: 20px;
		height: 30%;
  }
	.logo{
		width: 48px;
		height: 48px;
		margin-right: 10px;
	}
	.title{
		font-size: 24px;
	}
	.login-form{
		min-width: 335px;
		max-width: 500px;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 20px;
		padding: 20px 20px 40px;
	}
	.login-title{
		text-align: center;
		font-weight: bold;
		font-size: 24px;
		margin-bottom: 12px;
	}
}
</style>
